<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <h1>体检预约-登录</h1>
    <section>
      <div class="input-box">
        <i class="fa fa-user-o"></i>
        <input type="text" placeholder="输入手机号" v-model="users.userId" />
      </div>
      <div class="input-box">
        <i class="fa fa-lock"></i>
        <input
          type="password"
          placeholder="输入登录密码"
          v-model="users.password"
        />
      </div>
      <div class="reg-box">
        <p @click="toRegister">注册</p>
        <p @click="forgetPassword">忘记密码？</p>
      </div>
      <div class="button-box" @click="login">登录</div>
    </section>

    <footer>
      <div>
        <div class="line"></div>
        <p>有疑问请联系客服</p>
        <div class="line"></div>
      </div>
      <p>4008-XXX-XXX</p>
    </footer>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import axios from "../axios";
import { useRouter,useRoute } from "vue-router";
import { setSessionStorage } from "@/common";

export default {
  setup() {
    const router = useRouter(); // 2 router  route
    const state = reactive({
      users: {
        userId: "",
        password: "",
      },
    });

    function toRegister(){
        router.push("/register")
    }

    function forgetPassword(){
        //....
    }

    function login() {
      if (state.users.userId == "") {
        alert("手机号不能为空");
        return;
      }
      if (state.users.password == "") {
        alert("密码不能为空");
        return;
      }

      console.log("校验已经通过-----------------")

      axios
        .post("/api/login", state.users)
        .then((response) => {
          console.log("response headers:"+response.headers.token)
          let result = response.data; //ApiResponse
          if (result.status == 200) {
            console.log("userdata:"+result.data);
            
            //前端项目需要把返回的用户信息放入sessionStorage这个存储域中，方便各个vue组件共享数据
            //sessionStorage.setItem()  // HttpSession   session.addAttribute
            setSessionStorage("userlingnan",result.data);  //result.data 是真正后端传过来的user数据

           //获取令牌并存入session
           

            setSessionStorage("token",response.headers.token);


            router.push("/index");
          } else {
            alert(result.desc); //后端会把报错信息通知前端，存在desc属性中
          }
        })
        .catch((error) => {
          console.error(error);
        });
    }

    return {
      ...toRefs(state),
      toRegister,
      login,
      forgetPassword
    };
  },
};
</script>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #266c9f, #266c9f, #7eb059);
  overflow: hidden;
}

/*********************** 标题部分 ***********************/
h1 {
  text-align: center;
  color: #fff;
  font-size: 9.5vw;
  font-weight: 500;
  margin-top: 13vh;
  margin-bottom: 3vh;
}

/*********************** 内容部分 ***********************/
section {
  width: 86vw;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 2.4vw;

  box-sizing: border-box;
  padding: 6vw;
  margin-bottom: 45vw;
}

section .input-box {
  width: 100%;
  height: 12vw;
  border: solid 1px #ccc;
  border-radius: 2vw;
  margin-top: 5vw;

  display: flex;
  align-items: center;
}
section .input-box i {
  margin: 0 3.6vw;
  font-size: 5.4vw;
  color: #ccc;
}
section .input-box input {
  border: none;
  outline: none;
}

section .reg-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
  margin-bottom: 2vw;
}
section .reg-box p {
  font-size: 3.3vw;
  color: #2d727e;
  user-select: none;
  cursor: pointer;
}

section .button-box {
  width: 100%;
  height: 13vw;
  border-radius: 2vw;
  background-color: #70b0bc;

  text-align: center;
  line-height: 13vw;
  font-size: 4.6vw;
  color: #fff;
  letter-spacing: 1vw;

  user-select: none;
  cursor: pointer;
}

/*********************** footer部分 ***********************/
footer {
  width: 86vw;
  margin: 0 auto;
  margin-top: 12vw;
  font-size: 3.8vw;
  color: #fff;
}
footer div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer div .line {
  width: 22vw;
  height: 1px;
  background-color: #fff;
}
footer > p {
  text-align: center;
  margin-top: 2vw;
}
</style>